<template>
	<div class="page-min">
		<el-card class="box-card">
			<el-button type="primary" @click="dialogFormVisible =true">新增</el-button>
			<div style="height: 10px;"></div>
			<el-table :data="tableData" border style="width: 100%" max-height="600">
				<el-table-column label="序号" width="100">
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
				<el-table-column prop="enterpriseName" label="企业名称">
				</el-table-column>
				<el-table-column prop="contacts" label="联系人">
				</el-table-column>
				<el-table-column prop="position" label="职务">
				</el-table-column>
				<el-table-column prop="bankName" label="开户行">
				</el-table-column>
				<el-table-column prop="bankBranch" label="支行名称">
				</el-table-column>
				<el-table-column prop="corporateAccount" label="对公账户">
				</el-table-column>
				<el-table-column label="操作" width="300" fixed="right">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleClick(scope.row)">查看</el-button>
						<el-button size="mini" @click="editorClick(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="deleteClick(scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="height: 10px;"></div>
			<!-- <el-pagination layout="prev, pager, next" :total="1000" :hide-on-single-page="valuePage">
			</el-pagination> -->
		</el-card>

		<!-- 新增 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible">
			<el-form :model="form" :rules="rules" ref="form">
				<el-form-item label="企业名称" :label-width="formLabelWidth" prop="enterpriseName">
					<el-input v-model="form.enterpriseName" autocomplete="off" :disabled="disabled"></el-input>
				</el-form-item>
				<el-form-item label="联系人" :label-width="formLabelWidth" prop="contacts">
					<el-input v-model="form.contacts" autocomplete="off" :disabled="disabled"></el-input>
				</el-form-item>
				<el-form-item label="职务" :label-width="formLabelWidth" prop="position">
					<el-input v-model="form.position" autocomplete="off" :disabled="disabled">
					</el-input>
				</el-form-item>
				<el-form-item label="开户行" :label-width="formLabelWidth" prop="bankName">
					<!-- <el-input v-model="form.bankName" autocomplete="off" :disabled="disabled">
					</el-input> -->
					<el-select v-model="form.bankName" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="支行名称" :label-width="formLabelWidth" prop="bankBranch">
					<el-input v-model="form.bankBranch" autocomplete="off" :disabled="disabled">
					</el-input>
					<!-- <el-select v-model="form.bankBranch" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select> -->
				</el-form-item>
				<el-form-item label="对公账户" :label-width="formLabelWidth" prop="corporateAccount">
					<el-input v-model="form.corporateAccount" autocomplete="off" :disabled="disabled">
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="close">取 消</el-button>
				<el-button type="primary" @click="submitForm('form',)">保存</el-button>
			</div>
		</el-dialog>
		<!-- 查看 -->
		<el-dialog title="" :visible.sync="dialogFormVisibleHandle">
			<el-form :model="dataForm">
				<el-form-item label="企业名称" :label-width="formLabelWidth" prop="enterpriseName">
					<el-input v-model="dataForm.enterpriseName" autocomplete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="联系人" :label-width="formLabelWidth" prop="contacts">
					<el-input v-model="dataForm.contacts" autocomplete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="职务" :label-width="formLabelWidth" prop="position">
					<el-input v-model="dataForm.position" autocomplete="off" :disabled="true">
					</el-input>
				</el-form-item>
				<el-form-item label="开户行" :label-width="formLabelWidth" prop="bankName">
					<el-input v-model="dataForm.bankName" autocomplete="off" :disabled="true">
					</el-input>
				</el-form-item>
				<el-form-item label="支行名称" :label-width="formLabelWidth" prop="bankBranch">
					<el-input v-model="dataForm.bankBranch" autocomplete="off" :disabled="true">
					</el-input>
				</el-form-item>
				<el-form-item label="对公账户" :label-width="formLabelWidth" prop="corporateAccount">
					<el-input v-model="dataForm.corporateAccount" autocomplete="off" :disabled="true">
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleHandle = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisibleHandle = false">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		businessEnterpriseList,
		businessEnterpriseNew,
		businessEenterpriseDelete,
		businessEnterprisePut,
		businessEnterpriseGet,
		businessEenterpriseAllList
	} from '../../api/assessment.js'
	export default {
		components: {},
		data() {
			return {
				options: [{
					value: '建设银行',
					label: '建设银行'
				}, {
					value: '工商银行',
					label: '工商银行'
				}, {
					value: '招商银行',
					label: '招商银行'
				}],
				dialogFormVisibleHandle: false,
				title: '新增考核系数',
				btnName: '保存',
				disabled: false,
				typePop: 1,
				dialogTableVisible: false,
				dialogFormVisible: false,
				form: {
					enterpriseName: '',
					contacts: '',
					position: '',
					bankName: '',
					bankBranch: '',
					corporateAccount: ''
				},
				dataForm: {},
				valuePage: false,
				rules: {
					enterpriseName: [{
						required: true,
						message: '请填写企业名称',
						trigger: 'blur'
					}],
					contacts: [{
						required: true,
						message: '请填写联系人',
						trigger: 'blur'
					}],
					position: [{
						required: true,
						message: '请填写职务',
						trigger: 'blur'
					}],
					bankName: [{
						required: true,
						message: '请填写开户行',
						trigger: 'blur'
					}],
					bankBranch: [{
						required: true,
						message: '请填写支行名称',
						trigger: 'blur'
					}],
					corporateAccount: [{
						required: true,
						message: '请填写对公账户',
						trigger: 'blur'
					}]
				},
				formLabelWidth: '120px',
				tableData: []
			}
		},
		created() {
			this.businessEnterpriseListPost()
			this.businessEnterpriseAllListGet()
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (this.typePop == 1) {
							this.businessEnterpriseNewPost(this.form)
						} else if (this.typePop == 2) {
							this.businessEnterprisePut()
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			close() {
				this.dialogFormVisible = false
				this.form.enterpriseName = ''
				this.form.contacts = ''
				this.form.position = ''
				this.form.bankName = ''
				this.form.bankBranch = ''
				this.form.corporateAccount = ''
			},
			//查看
			handleClick(row) {
				this.dialogFormVisibleHandle = true
				businessEnterpriseGet(row.id).then(res => {
					this.dataForm = res.data
				})
			},
			//编辑
			editorClick(row) {
				this.title = '编辑考核系数'
				this.dialogFormVisible = true
				this.typePop = 2
				this.form.enterpriseName = row.enterpriseName
				this.form.contacts = row.contacts
				this.form.position = row.position
				this.form.bankName = row.bankName
				this.form.bankBranch = row.bankBranch
				this.form.corporateAccount = row.corporateAccount
				// {
				// 	enterpriseName: '',
				// 	contacts:'',
				// 	position: '',
				// 	bankName: '',
				// 	bankBranch: '',
				// 	corporateAccount: ''
				// },
				this.form.id = row.id
			},
			businessEnterprisePut() {
				businessEnterprisePut(this.form).then(res => {
					this.$message({
						type: 'success',
						message: res.msg
					});
					this.dialogFormVisible = false
					this.form.enterpriseName = ''
					this.form.contacts = ''
					this.form.position = ''
					this.form.bankName = ''
					this.form.bankBranch = ''
					this.form.corporateAccount = ''
					this.businessEnterpriseListPost()
				})
			},

			//删除
			deleteClick(row) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					businessEenterpriseDelete(row.id).then(res => {
						this.$message({
							type: 'success',
							message: res.msg
						});
						this.businessEnterpriseListPost()
					})
				}).catch(() => {
					// this.$message({
					// 	type: 'info',
					// 	message: '已取消删除'
					// });
				});
				console.log("row: ", row);

			},
			//删除
			businessEenterpriseDelete() {
				businessEenterpriseDelete().then(res => {
					this.$message({
						message: '新增成功',
						type: 'success'
					});
				})
			},
			//新增考核列表
			businessEnterpriseNewPost(data) {
				businessEnterpriseNew(data).then(res => {
					this.$message({
						message: res.msg,
						type: 'success'
					});
					this.dialogFormVisible = false
					this.form.enterpriseName = ''
					this.form.contacts = ''
					this.form.position = ''
					this.form.bankName = ''
					this.form.bankBranch = ''
					this.form.corporateAccount = ''
					this.businessEnterpriseListPost()
				})
			},
			//企业信息列表
			businessEnterpriseListPost() {
				businessEnterpriseList({
					page: 1,
					pageSize: 10,
					data: {}
				}).then(res => {
					// console.log("res.rows: ",res.rows);
					this.tableData = res.rows
				})
			},
			businessEnterpriseAllListGet() {
				businessEenterpriseAllList().then(res => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-min {
		margin: 10px;
		background-color: #fff;
		// border:1px solid #ddd;
		border-radius: 4px;
		padding: 40px;
	}
</style>

